<template>
  <view class="event-product-block">
    <view class="title">
      <template v-if="type === '限时秒杀'">
        <v-image
          height="32rpx"
          width="112rpx"
          src="@/static/icons/product-hot-selling.svg"
        />
        <view class="tag">
          热卖中
        </view>
      </template>
      <template v-else>
        <v-image
          height="32rpx"
          width="112rpx"
          src="@/static/icons/product-time-limited.svg"
        />
        <wd-count-down :time="time">
          <template #default="{ current }">
            <view class="count-down-container">
              <view class="count-down">
                {{ parseTime(current.hours) }}
              </view>
              <view class="count-down-colon">
                :
              </view>
              <view class="count-down">
                {{ parseTime(current.minutes) }}
              </view>
              <view class="count-down-colon">
                :
              </view>
              <view class="count-down">
                {{ parseTime(current.seconds) }}
              </view>
            </view>
          </template>
        </wd-count-down>
      </template>
    </view>
    <view class="product-list">
      <view
        v-for="product in productList"
        :key="product.id"
        class="product-item"
        @click="navigateToDetails(product.id)"
      >
        <v-image
          height="135rpx"
          width="135rpx"
          border-radius="8rpx"
          mode="aspectFill"
          :src="product.image"
        />
        <v-price
          size="32rpx"
          :price="product.min_sell_price"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  type: '商品热卖' | '限时秒杀';
  productList: SpuVO[];
}>();

const time = computed(() => {
  const nextDay = new Date();
  nextDay.setDate(nextDay.getDate() + 1);
  nextDay.setHours(0, 0, 0, 0);
  return nextDay.getTime() - new Date().getTime();
});

const parseTime = (time: number) => {
  return time < 10 ? `0${time}` : time;
};

const navigateToDetails = (id: string) => {
  uni.navigateTo({
    url: `/pages/product/product-details?id=${id}`
  });
};
</script>

<style lang="scss" scoped>
.event-product-block {
  height: 277rpx;
  width: 340rpx;
  padding: 24rpx 24rpx 12rpx 24rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: linear-gradient(
    180deg,
    rgba(255, 184, 184, 1) 0%,
    rgba(255, 255, 255, 1) 25.81%
  );
  .title {
    height: 40rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    .count-down-container {
      display: flex;
      align-items: center;
      height: 36rpx;
      line-height: 36rpx;
    }
    .count-down {
      height: 36rpx;
      line-height: 36rpx;
      width: 36rpx;
      border-radius: 6rpx;
      background-color: #ff2f3b;
      font-size: 24rpx;
      color: white;
      text-align: center;
    }
    .count-down-colon {
      height: 36rpx;
      line-height: 36rpx;
      color: #ff2f3b;
      margin: 0 3rpx;
    }
    .tag {
      border-radius: 18rpx 18rpx 18rpx 0;
      height: 36rpx;
      line-height: 36rpx;
      width: 100rpx;
      text-align: center;
      background-color: #ff2f3b;
      font-size: 24rpx;
      color: white;
    }
  }
  .title-image {
    height: 32rpx;
    width: 112rpx;
  }
  .product-list {
    margin-top: 12rpx;
    display: flex;
    justify-content: space-between;
  }
  .product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    .product-price {
      color: #ff2f3b;
      font-size: 24rpx;
    }
  }
}
</style>
